<template>
  <div class="ly-border-card team-box">
    <div class="team-header flex-center-between">
      <div>
        <span class="color-line"></span>
        <span style="font-weight: bold;margin-right: 4px;">{{ teamTitle }}</span>
      </div>
      <div class="filter-box">
        <el-checkbox @change="onFilterChange" v-model="onlyJunior">仅看直接下级</el-checkbox>
        <el-select class="no-border-select" style="margin-left:10px;width: 100px;" @change="onFilterChange"
                   v-model="organizationType">
          <el-option label="全选" value="all"></el-option>
          <el-option label="组织维度" value="organization"></el-option>
          <el-option label="运营维度" value="operation"></el-option>
          <el-option label="区域维度" value="area"></el-option>
        </el-select>
      </div>
    </div>

    <div class="team-table">
      <CommonTable :table-loading="teamTableLoading" :table-data="teamList"
                   :table-header-data="tableHeaderList"></CommonTable>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, h} from 'vue'
import {useRoute} from "vue-router";
import CommonTable from "@/components/CommonTable.vue";

const route = useRoute()
const teamType = computed(() => route.params.type)
const teamTitle = computed(() => {
  return {
    required: '今日应出勤',
    actual: '今日实出勤',
    leave: '今日请假',
    '15hour': '连续上班超15小时',
    '2week': '连续上班两周以上',
    'late': '迟到人数',
  }[teamType.value] || '我的团队'
})
const onlyJunior = ref(true)
const organizationType = ref('all')

function onFilterChange() {
  const params = {
    teamType: teamType.value,
    onlyJunior: onlyJunior.value,
    organizationType: organizationType.value
  }
  console.log(params, 'params')
}

const teamTableLoading = ref(false)
const tableHeaderList = computed(() => {
  let headerList = []
  switch (teamType.value) {
    case 'required':
      headerList = [{prop: 'name', label: '姓名', 'min-width': 60, align: 'center'},
        {prop: 'workNo', label: '工号', 'min-width': 60, align: 'center'},
        {prop: 'departName', label: '部门', 'min-width': 60, align: 'center'},
        {prop: 'post', label: '岗位', 'min-width': 60, align: 'center'},
        {prop: 'leader', label: '直接上级', 'min-width': 80, align: 'center'},]
      break;
    case 'actual':
      headerList = [{prop: 'name', label: '姓名', 'min-width': 60, align: 'center'},
        {prop: 'workNo', label: '工号', 'min-width': 60, align: 'center'},
        {prop: 'departName', label: '部门', 'min-width': 60, align: 'center'},
        {prop: 'post', label: '岗位', 'min-width': 60, align: 'center'},
        {prop: 'leader', label: '直接上级', 'min-width': 80, align: 'center'},
        {prop: 'checkTime', label: '上班时间', 'min-width': 80, align: 'center'},]
      break;
    case 'leave':
      headerList = [{prop: 'name', label: '姓名', 'min-width': 60, align: 'center'},
        {prop: 'workNo', label: '工号', 'min-width': 60, align: 'center'},
        {prop: 'departName', label: '部门', 'min-width': 60, align: 'center'},
        {prop: 'post', label: '岗位', 'min-width': 60, align: 'center'},
        {prop: 'leader', label: '直接上级', 'min-width': 80, align: 'center'},
        {prop: 'leaveReason', label: '请假事项', 'min-width': 80, align: 'center'},]
      break;
    case '15hour':
      headerList = [{prop: 'name', label: '姓名', 'min-width': 60, align: 'center'},
        {prop: 'workNo', label: '工号', 'min-width': 60, align: 'center'},
        {prop: 'departName', label: '部门', 'min-width': 60, align: 'center'},
        {prop: 'post', label: '岗位', 'min-width': 60, align: 'center'},
        {prop: 'leader', label: '直接上级', 'min-width': 80, align: 'center'},
        {prop: 'workHours', label: '上班时长', 'min-width': 80, align: 'center'},]
      break;
    case '2week':
      headerList = [{prop: 'name', label: '姓名', 'min-width': 60, align: 'center'},
        {prop: 'workNo', label: '工号', 'min-width': 60, align: 'center'},
        {prop: 'departName', label: '部门', 'min-width': 60, align: 'center'},
        {prop: 'post', label: '岗位', 'min-width': 60, align: 'center'},
        {prop: 'leader', label: '直接上级', 'min-width': 80, align: 'center'},
        {prop: 'continuousWork', label: '连续上班', 'min-width': 80, align: 'center'},]
      break;
    case 'late':
      headerList = [{prop: 'name', label: '姓名', 'min-width': 60, align: 'center'},
        {prop: 'workNo', label: '工号', 'min-width': 60, align: 'center'},
        {prop: 'departName', label: '部门', 'min-width': 60, align: 'center'},
        {prop: 'post', label: '岗位', 'min-width': 60, align: 'center'},
        {prop: 'leader', label: '直接上级', 'min-width': 80, align: 'center'},
        {prop: 'lateCount', label: '迟到次数', 'min-width': 80, align: 'center'},
        {prop: 'averageHours', label: '平均工作日加班时长', 'min-width': 100, align: 'center'},]
      break;
  }
  return headerList
})
const teamList = ref([
  {
    name: '张三',
    workNo: '12345678',
    departName: 'xxxx部门',
    post: 'xxxxxx岗位',
    leader: '李四'
  },
  {
    name: '张三',
    workNo: '12345677',
    departName: 'xxxx部门',
    post: 'xxxxxx岗位',
    leader: '李四'
  },
  {
    name: '张三',
    workNo: '12345676',
    departName: 'xxxx部门',
    post: 'xxxxxx岗位',
    leader: '李四'
  }
])
</script>

<style scoped lang="scss">
.team-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.team-header {
  .filter-box {
    margin-left: 10px;
    flex: 1;
    width: 1px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: flex-end;
  }
}

.team-table {
  margin-top: 10px;
  flex: 1;
  height: 1px;
}
</style>
